<template>
    <pre>
        <h3>run 后在控制台看结果</h3>
    <code>
        export const letConstFunc = () => {
            const divide = '------------------------------------------------分割------------------------------------------------'
        //----------let----------
            try {
                {
                let a = 10
                var b = 1
                }
                console.log(a, b)
            } catch (error) {
                console.error('let声明的变量只在代码块内有效 - ' + error)
            }
            console.log(divide)

            //经典案例
            var list_var = []
            for (var i = 0; i &lt; 10; i++) {
            list_var[i] = function () {
                console.log('for循环中使用 var - ' + i)
            }
            }
            list_var[6]()
            
            var list_let = []
            for (let i = 0; i &lt; 10; i++) {
            list_let[i] = function () {
                console.log('for循环中使用 let - ' + i); //每一次循环的i其实都是一个新的变量
            };
            }
            list_let[6]()
            console.log(divide)

            //另外 for循环 设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

            try {
                console.log('var存在变量提升 初始化为 undefined - ' + foo)
                var foo = 2

                console.error('vue中使用了Babel 将ES6 转成了 ES5 并非变量提升 - ' + bar)
                let bar = 2 //不存在变量提升 ！！！创建过程提升了 初始化和赋值没有提升
            } catch(error){
                console.error('let不存在变量提升 - ' + error)
            }
            console.log(divide)

            //暂时性死区 使用let命令声明变量之前，该变量都是不可用的
            try {
                {
                    // TDZ开始
                    tmp = 'abc'; // ReferenceError
                    console.error('vue中使用了Babel 将ES6 转成了 ES5 所以这里可以拿到值 - ' + tmp); // ReferenceError

                    let tmp; // TDZ结束
                    console.error('vue中使用了Babel 将ES6 转成了 ES5 存在暂时性死区 - ' + tmp); // undefined

                    tmp = 123;
                    console.log('死区已经结束 正常赋值 - ' + tmp); // 123
                }
            } catch (error) {
                console.error('暂时性死区 - ' + error)
            }
            console.log(divide)
            
            // typeof不再安全
            try {
                {
                    console.error('vue中使用了Babel 将ES6 转成了 ES5 所以这里 typeof 不会报错 - ' + typeof x) // ReferenceError
                    let x;
                }
            } catch (error) {
                console.error('存在死区 typeof 报错 - ' + error)
            }
            console.log(divide)

            //let 不允许在相同作用域内，重复声明同一个变量
            {
                let e = 1
                // let e = 2
                console.error('let不允许在相同作用域内，重复声明同一个变量')
            }
            console.log(divide)

            console.warn('应该避免在块级作用域内声明函数 如果确实需要，也应该写成函数表达式，而不是函数声明语句')
            console.log(divide)

        //----------const----------
            {
                const PI = 3.1415
                // PI = 3
                console.error('const 一旦声明 就必须立即赋值 且以后都不能改变')
                console.warn('同样只在块内有效 不存在提升 有暂时性死区 不能重复声明')
                console.warn('事实上 是变量指向的那个内存地址所保存的数据不得改动 所以对象和数组仍然可以添加项')
            }
        }
    </code>
    </pre>
</template>

<script>
import {letConstFunc} from './let_const_func'
export default {
    data() {
        return {
            functionContent: null
        }
    },
    created() {
        this.functionContent = letConstFunc.toString()
    },
}
</script>

<style scoped>
</style>